<!DOCTYPE html >
<html>
<head>
    <base>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>订单审核</title>
    <link rel="stylesheet" href="../../../res/layui/css/layui.css" media="all">
    <style>
        body{margin: 10px;}
        .demo-carousel{height: 300px; line-height: 300px; text-align: center;}

        .demoTable {
            z-index: 10px;
        }

        #addReload {
            position: absolute;
            top: 0%;
            z-index: 10000;
            background: rgb(0, 0, 0, 0.9);
            width: 100%;
            height: 100%;
            display: none;
        }

        #addOperation {
            position: absolute;
            left: 30%;
            top: 15%;
            width: 40%;
            background: white;
        }

    </style>
</head>
<body>
<div class="demoTable">
    搜索供应商：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="supName"
               autocomplete="off" placeholder="请输入供应商名称">
    </div>

    时间：
    <div class="layui-input-inline">
        <input name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"
               type="text">
    </div>
    ——
    <div class="layui-input-inline">
        <input name="date" id="date1" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input"
               type="text">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="goods" lay-filter="demo"></table>
<script type="text/html" id="xx">
    <a class="layui-btn layui-btn-xs" lay-event="chakan" id="dindanxx">查看订单详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="chakansh" id="shenhecx">查看审核详情</a>
</script>

<script src="../../../res/layui/layui.js"></script>
<script src="../../../res/js/jquery-3.4.1.min.js"></script>
<script src="../../../res/js/util.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="shenhe" id="shenhe">审核</a>
</script>
<script type="text/html" id="zt">
    {{zt(d)}}
</script>
<script>
    function zt(d) {
        if (d.reviewState == "0") {
            return '等待审核';
        } else if (d.reviewState == "1") {
            return '审核通过';
        } else {
            return '审核失败';
        }
    }
    var openIndex = null;
    var table = null;
    layui.use(['laydate','form', 'laypage', 'layer', 'table', 'upload', 'element'], function(){
        table = layui.table;
        var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
        layer = layui.layer //弹层
           // ,table = layui.table //表格
            ,upload = layui.upload //上传
            ,form=layui.form
            ,element = layui.element; //元素操作

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //监听Tab切换
        element.on('tab(demo)', function(data){
            layer.msg('切换了：'+ this.innerHTML);
            console.log(data);
        });
        //执行一个 table 实例
        table.render({
            elem: '#goods'
            , height: 474
            , url: getRootPath() + 'hqPurchaseorder/showAllReview' //数据接口
            , page: true //开启分页
            , method: 'post'
            , cols: [[ //表头
                //{type: 'checkbox', fixed: 'left'}
                //, {field: 'purchaseId', title: '采购订单Id', width: 150, fixed: 'left', align: 'center'}
                {field: 'supName', title: '供应商名称', width: 120, align: 'center'}
                , {field: 'purchasePerson', title: '采购人', width: 120, align: 'center'}
                , {field: 'purchaseTime', title: '采购时间', width: 160, align: 'center'}
                , {field: 'purchaseSumprice', title: '采购总金额', width: 120, align: 'center'}
                , {field: 'count', title: '重量(g)', width: 80, align: 'center'}
                , {field: 'reviewState', title: '采购状态', width: 180, align: 'center', templet: '#zt'}
                , {field: 'remark', title: '采购备注', width: 120, align: 'center'}
                , {fixed: 'right', title: '查询信息', width: 210, align: 'center', toolbar: '#xx'}
                , {fixed: 'right', title: '操作', width: 140, align: 'center', toolbar: '#barDemo'}
            ]]
            , id: 'testReload'
        });

        //监听工具条
        table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'shenhe'){
                //审核按钮
                var url = "shenheinsert.html?Id=" + data.purchaseId;
                openIndex = layer.open({
                    type: 2,
                    area: ['40%', '75%'],//弹出框大小
                    shift: 1,//弹出框动画效果
                    content: [url, 'on'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            } else if(layEvent==='chakan'){
                var url = "purchasedetails.html?purchaseId=" + data.purchaseId;
                layer.open({
                    type: 2,
                    area: ['76%', '75%'],//弹出框大小
                    shift: 1,//弹出框动画效果
                    content: [url, 'on'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            }else if(layEvent==='chakansh'){
                var url = "reviewdetailed.html?purchaseId=" + data.purchaseId;
                layer.open({
                    type: 2,
                    area: ['76%', '75%'],//弹出框大小
                    shift: 1,//弹出框动画效果
                    content: [url, 'on'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                });
            }
        });

        //条件查询
        var $ = layui.$;

        $('.demoTable .layui-btn').on('click', function () {
            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1
                    //重新从第 1页开始
                },
                where: {
                    supName: $("#supName").val(),
                    startTime: $("#date").val(),
                    overTime: $("#date1").val()
                }

            });
        });
    });
    /**
     * 点击取消
     */
    function quxiao(){
        layer.close(openIndex);
    }

    /**
     * 关闭层
     * @param msg 返回信息
     */
    function closeOpen(msg) {
        layer.close(openIndex);
        layer.msg(msg, {time: 1500})
        table.reload("testReload");//刷新表格
    }

</script>
</body>
</html>